<template>
  <div class="grid-content">
    <div class="grid-msg">
      <p class="tile-eyebrow">{{scenery?.title}}</p>
      <h3 class="tile-headline">
        {{scenery?.head}}<br />
        {{scenery?.msg}}
      </h3>
    </div>
    <div class="imgblock">
      <!-- <el-image :src="scenery?.img" fit="scale-down" /> -->
      <el-image :src="scenery?.imgs[0]" fit="scale-down" />
    </div>
  </div>
</template>
  
<script lang="ts">
import { defineComponent } from "vue";
import { place } from "../../type/scenery"

function getImg(url: string):string {
  return require(url)
}

export default defineComponent({
  name: "scenery-view",
  props:{
    scenery: Object as () => place
  },
  setup() {
    return{
      getImg
    }
  }
});
</script>

<style>
.grid-content {
  border-radius: 20px;
  min-height: 700px;
  background-color: white;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.imgblock {
  position: absolute;
  bottom:0px;
}

.grid-msg {
  background-color: white;
  width: 100%;
  padding: 20px 0;
}

.tile-eyebrow {
  font-size: 21px;
  line-height: 1.1904761905;
  font-weight: 600;
}

.tile-headline {
  line-height: 26px;
  max-width: 384px;
  margin: 7px auto;
}
</style>